<template>
	<section>
		<main>
			<mt-header fixed title="绑定银行卡">
				<mt-button slot="left" icon="back"  @click="goBack">
					<a class="white" href="javascript:;">返回</a>
				</mt-button>
			</mt-header>
			<p class="lh40 mt40 bggray fs12">持卡人必须与账户信息一致，信息不做其他用途</p>
			<div>
				<ul>
					<li class="lineb ml10 mr10 mt10 bgdark br4">
						<mt-field
							label="姓名"
							placeholder="请输入姓名"
							:state="realName?'success':'default'"
							v-model="realName"></mt-field>
					</li>
					<li class="lineb ml10 mr10 mt10 bgdark br4">
						<mt-field
							label="身份证号"
							placeholder="请输入身份证号"
							type="text"
							:state="idNumber&&idNumber.length==18?'success':'default'"
							v-model="idNumber"></mt-field>
					</li>
					<li class="lineb ml10 mr10 mt10 bgdark br4">
						<mt-field
							label="银行卡号"
							placeholder="请输入银行卡号"
							type="text"
							:state="cardNumber&&cardNumber.length>=16?'success':'default'"
							v-model="cardNumber"></mt-field>
					</li>
					<li class="lineb ml10 mr10 mt10 bgdark br4">
						<mt-field
							label="银行"
							placeholder="请选择银行"
							:state="bankName?'success':'default'"
							:attr="{disabled:true}"
							v-model="bankName">
                            <span
                                class="red"
                                v-show="cardState!=2"
                                @click="pickerShow=!pickerShow">{{!pickerShow?'选择银行':'确定'}}</span>
						</mt-field>
						<p class="lh20 fontc3">{{this.getLimitTip}}</p>
						<div class="picker" v-show="pickerShow">
							<mt-picker
								:slots="slots"
								@change="onValuesChange"></mt-picker>
						</div>
					</li>
					<li class="lineb ml10 mr10 mt10 bgdark br4">
						<mt-field
							label="手机号"
							placeholder="请输入手机号"
							type="tel"
							:state="phone&&phone.length==11?'success':'default'"
							v-model="phone"></mt-field>
					</li>
				</ul>
			</div>
			<div class="ml10 mr10 mt30" v-show="cardState!=2">
				<mt-button type="primary" size="large" @click="updateCardInfo">提 交</mt-button>
			</div>
			
		</main>
	</section>
</template>
<script>
import {MessageBox,Toast,Indicator,Actionsheet,Field,Button,Picker} from 'mint-ui'
import Vue from 'vue'
Vue.component({Field,Button,Picker});
import axios   from 'axios'
export default {
	name : "BindBank",
	data () {
		return {
			realName: "",
			idNumber: "",
			cardNumber: "",
			bankName: "",
			bankID: "",
			phone: "",
			cardState: null,
			slots: [],
			bankList: [],
            pickerShow : false,
		}
	},
	created () {
		this.getCardInfo();
    },
	computed : {
		getLimitTip () {
			if (this.bankID) {
				var str = ""
				this.bankList.forEach((value) => {
					if (this.bankID == value.id) {
						str = '￥单日限额:' + value.limitDay + ',单次限额:￥' + value.limitSingle;
					}
				})
				return str;
			}
		}
	},
	methods : {
		getCardInfo () {
			Indicator.open();
			axios({
				methods: "post",
				url: '/user/user/showAuthentication.do',
				params: {
				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				if (res.code == 200) {

					this.realName = res.data.realName;
					this.idNumber = res.data.idCard;
					this.cardNumber = res.data.cardNumber;
					this.bankName = res.data.issuingbankName;
					this.phone = res.data.cardPhone;
					this.bankID = res.data.bankId;
					this.cardState = res.data.cardState;
				} else {
					Toast(res.msg);
				}
			})
			.then(() => {
				this.getBankList();
			})
		},
		getBankList () {
			Indicator.open();
			axios({
				methods: "post",
				url: '/user/user/showChannelBankList.do',
				params: {

				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				if (res.code == 200) {
					
					this.bankList = res.data;

					const bank = [];
					var curBankIdx;
					res.data.forEach((value,idx,arr) => {
						bank.push(value.name)
						if (this.bankName === value.name) {
							curBankIdx = idx;
						}
					});
					// 初始化picker
					this.slots = [
						{
							flex: 1,
							values: bank,
							defaultIndex: curBankIdx,
							textAlign: 'center'
						}
					]
				}
			})
		},
		updateCardInfo () {
			if (!this.bankName || !this.cardNumber || !this.phone || !this.realName || !this.idNumber) {
				Toast('信息不完整');
				return;
			}
			Indicator.open();
			
			axios({
				methods: "post",
				url: '/user/user/bindIdCardAndBankCard.do',
				params: {
					bankId: this.bankID,
					bankName: this.bankName.trim(),
					cardNumber: this.cardNumber.trim(),
					cardPhone: this.phone.trim(),
					realName: this.realName.trim(),
					idCard: this.idNumber.trim(),
				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				
				if (res.code == 200) {
					this.getCardInfo();
					this.pickerShow = false;
				} else if(res.code == 503){
					Toast('您未登录');

				} else {
					
				}
				Toast(res.msg);
			})
		},
		onValuesChange(picker, values) {
			this.bankList.forEach((value) => {
				if (value.name == values) {
					this.bankID = value.id;
					this.bankName = value.name;
				}
			})
		},
		goBack () {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
		}
	}
}
</script>
<style scoped>
	.bank{
		border-top: 1px solid #f2f2f2;
	}
</style>